import { Button, Checkbox, Form, Input, message } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { getLoginInfo, setLoginInfo } from '@/utils/storeTools'
import { urlReflect } from '@/router/routerList'
import { pageSkip } from '@/utils/customTools'
import styles from './login.module.less'
import { useDispatch } from 'react-redux'
import { publicInfoActions } from '@/redux/slices/publicInfoSlice'

export default function Login() {
  const dispatch = useDispatch()

  if (getLoginInfo()) {
    pageSkip(urlReflect.home)
    return <></>
  } else
    return (
      <div id={styles.login}>
        <div className={'loginLogo'}>LOGIN_LOGO</div>
        <Form
          size={'large'}
          className={'loginForm'}
          initialValues={{ remember: true, username: '123456789', password: '123456789' }}
          onFinish={async (values) => {
            setLoginInfo(values)
            await message.success('登录成功, 即将跳转 ... ')
            dispatch(publicInfoActions.setUserInfo({ userName: values.username, userAuth: 0 }))
            pageSkip(urlReflect.home)
          }}
        >
          <Form.Item name={'username'} rules={[{ required: true, message: '请输入用户名/手机号/邮箱!' }]} style={{ minHeight: 66, margin: 0 }}>
            <Input prefix={<UserOutlined />} placeholder={'用户名/手机号/邮箱'} />
          </Form.Item>
          <Form.Item name={'password'} rules={[{ required: true, message: '请输入密码!' }]} style={{ minHeight: 66, margin: 0 }}>
            <Input.Password prefix={<LockOutlined />} placeholder={'密码'} />
          </Form.Item>
          <Form.Item style={{ marginBottom: 10 }}>
            <Form.Item name={'remember'} valuePropName={'checked'} noStyle>
              <Checkbox className={'loginRemember'}>记住我</Checkbox>
            </Form.Item>
            <a href='#/login' className={'loginForgetPassword'}>
              忘记密码
            </a>
          </Form.Item>
          <Form.Item>
            <Button type={'primary'} htmlType={'submit'} className={'loginFormButton'}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
}
